<template>
  <div class="main">
    <!-- 左侧导航 -->
    <div
      class="left"
      :style="{
        backgroundColor: themeColor,
        width: !isCollapse ? '200px' : 'auto',
      }"
    >
      <div class="logo">Bing</div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :background-color="themeColor"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse"
        style="border: none"
        router
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span>账户管理</span>
          </template>
          <el-menu-item index="/layout/admin">账号管理</el-menu-item>
          <el-menu-item index="/layout/role">角色管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-office-building"></i>
            <span>客房管理</span>
          </template>
          <el-menu-item index="/layout/roomType">类型管理</el-menu-item>
          <el-menu-item index="/layout/room">房间管理</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span>客户管理</span>
          </template>
          <el-menu-item index="/layout/guest">客户管理</el-menu-item>
        </el-submenu>
        <!-- <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>权限管理</span>
          </template>
          <el-menu-item index="/layout/permission">权限管理</el-menu-item>
        </el-submenu> -->
      </el-menu>
    </div>
    <!-- 右侧内容 -->
    <div class="right">
      <!-- 顶部导航 -->
      <div class="nav" :style="{ backgroundColor: themeColor }">
        <div class="icon">
          <i
            :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
            @click="isCollapse = !isCollapse"
          ></i>
        </div>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          :background-color="themeColor"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="min-width: 600px"
          router
        >
          <el-menu-item index="/layout"
            ><i class="el-icon-s-home"></i>Home</el-menu-item
          >
          <el-menu-item index="/layout/message"
            ><i class="el-icon-s-comment"></i>Message</el-menu-item
          >
          <el-menu-item index="/layout/email"
            ><i class="el-icon-message"></i>Email</el-menu-item
          >
          <el-submenu index="4">
            <template slot="title"
              ><i class="el-icon-s-opportunity"></i>Theme</template
            >
            <el-menu-item
              @click="changeTheme(item.value)"
              v-for="(item, index) in theme"
              :key="index"
              >{{ item.name }}</el-menu-item
            >
          </el-submenu>
          <el-submenu index="5">
            <template slot="title"
              ><el-avatar
                size="small"
                :src="
                  BASE_URL_AdminImg +
                  (admin.photo ? admin.photo : 'admin_default.png')
                "
                style="margin-right: 10px; margin-bottom: 2px"
              ></el-avatar
              >{{ admin.nickName }}</template
            >
            <el-menu-item index="/layout/mine">个人中心</el-menu-item>
            <el-menu-item index="/layout/resetPwd">密码修改</el-menu-item>
            <el-menu-item @click="logout">注销</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <!-- 内容区域 -->
      <div class="content">
        <!-- 路由视图 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
// 导入vuex的映射函数
import { mapState, mapMutations } from "vuex";
import { BASE_URL_AdminImg } from "../config/index";
export default {
  data() {
    return {
      BASE_URL_AdminImg,
      activeIndex: "1",
      activeIndex2: "1",
      // 主题颜色
      themeColor: localStorage.getItem("themeColor") || "#545c64",
      // 是否折叠左侧导航
      isCollapse: false,
    };
  },
  created() {
    // 获取当前用户登录的用户名
    let loginId = localStorage.getItem("loginId");
    if (!loginId) {
      // 如果用户名为空,跳回到登录页面
      this.$router.push("/login");
    }
    // 根据用户名,获取用户信息
    this.$get("/user/getOne", { loginId }).then((res) => {
      this.setAdmin(res);
    });
  },
  computed: {
    ...mapState("theme", ["theme"]),
    ...mapState("admin", ["admin"]),
  },
  methods: {
    // 导入vuex登录账户的方法
    ...mapMutations("admin", ["setAdmin"]),
    // 切换主题
    changeTheme(color) {
      // 设置当前主题颜色
      this.themeColor = color;
      // 将主题颜色保存到浏览器的缓存中
      localStorage.setItem("themeColor", color);
    },
    logout() {
      // 清除浏览器缓存
      sessionStorage.clear();
      localStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>
<style scoped lang='scss'>
.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  .left {
    .logo {
      width: 75%;
      color: white;
      font-size: 18px;
      text-align: center;
      padding: 8px 0;
      border: 1px solid #fff;
      margin: 10px auto;
    }
  }
  .right {
    flex: 1;
    .nav {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon {
        padding-left: 8px;
        i {
          color: #ccc;
          font-size: 20px;
        }
      }
    }
    .content {
      padding: 8px;
    }
  }
}
</style>